<template>
    <el-form
        :model="form_data"
        :rules="rules"
        label-width="80px"
        ref="form_data"
        size="small"
    >
        <el-form-item prop="email" label="邮箱">
            <el-input
                type="email"
                :readonly="is_edit"
                v-model.trim="form_data.email"
            >
            </el-input>
        </el-form-item>
        <el-form-item prop="username" label="用户名">
            <el-input type="text" v-model.trim="form_data.username"> </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
            <el-input
                type="password"
                v-model.trim="form_data.password"
                show-password
                maxlength="16"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword" v-if="is_edit">
            <el-input
                type="password"
                v-model="form_data.newPassword"
                show-password
                maxlength="16"
            />
        </el-form-item>
        <el-form-item v-else label="确认密码" prop="confirm_pwd">
            <el-input
                type="password"
                v-model.trim="form_data.confirm_pwd"
                show-password
                maxlength="16"
            >
            </el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码">
            <el-input
                type="text"
                class="code-inp"
                v-model.trim="form_data.code"
                maxlength="6"
            >
            </el-input>
            <el-button
                type="primary"
                plain
                size="mini"
                @click="handle_code"
                :disabled="!is_click"
            >
                {{ code_text }}
            </el-button>
        </el-form-item>
        <el-form-item prop="role" label="角色">
            <el-radio v-model="form_data.role" label="customer"
                >消费者
            </el-radio>
            <el-radio v-model="form_data.role" label="admin">管理员</el-radio>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handle_submit"
                >{{ is_edit ? "修 改" : "注 册" }}
            </el-button>
            <el-button v-if="!is_edit" type="danger" @click="handle_reset"
                >重 置
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { get_code } from "@/api"
import rules from "./rules"

export default {
    created() {
        if (this.is_edit) {
            this.form_data = { ...this.$store.state.user.user_info }
        }
    },
    data() {
        const validate_confirm_pwd = (rule, value, callback) => {
            if (value !== this.form_data.password) {
                callback(new Error("两次输入密码不一致"))
            } else {
                callback()
            }
        }
        rules.confirm_pwd.push({
            validator: validate_confirm_pwd,
            trigger: "blur"
        })

        return {
            form_data: {
                role: "customer"
            },
            is_edit: this.$route.name === "UserCenter",
            rules,
            code_text: "获取验证码",
            is_click: true // 获取验证码按钮是否可点击
        }
    },
    methods: {
        handle_submit() {
            this.$refs.form_data.validate((valid) => {
                if (valid) {
                    this.$emit("submit", this.form_data)
                }
            })
        },
        handle_code() {
            // 验证表单字段，成功了执行回调函数，失败了将错误消息传入参数
            this.$refs.form_data.validateField("email", (err) => {
                if (err) {
                    return this.$message({
                        message: err,
                        type: "error"
                    })
                }
                get_code({ email: this.form_data.email }).catch((err) => {
                    this.$message({
                        message: err,
                        type: "error"
                    })
                })
                let second = 60
                this.is_click = false
                let timer = setInterval(() => {
                    this.code_text = second + "s"
                    if (--second <= 0) {
                        this.is_click = true
                        this.code_text = "获取验证码"
                        clearInterval(timer)
                    }
                }, 1000)
            })
        },
        handle_reset() {
            this.$refs.form_data.resetFields()
        }
    }
}
</script>

<style lang="less">
.code-inp {
    width: 120px;
    margin-right: 20px;
}
</style>
